<template>
	<view class="u-page">
		<view v-for="(item, index) in list" :key="index">
			<u-cell customStyle="background:#fff;" @click="showStore(item)" :title="item.name" :isLink="true" :label="item.area.mergename">
				<view slot="value">
					<text class="tag-info" v-if="item.commission">
						{{item.commission.commission_type | parseType}}
						<text v-if="item.commission.commission_type=='money'">￥{{item.commission.money}}</text>
						<text v-if="item.commission.commission_type=='persent'">{{item.commission.persent}}%</text>
					</text>
					<text class="tag-fail" v-else>
						未设置提成
					</text>
				</view>
			</u-cell>
		</view>
		<u-empty v-if="list.length==0" text="没有商铺!" mode="search" marginTop="50"></u-empty>
		<view v-if="seller_id" class="searchbtn" @click="showSearch=true;">
			<u-icon name="search" size="24" color="#fff"></u-icon>
		</view>
		<u-popup :show="showDetail" @close="showDetail=false" mode="center" :round="4" customStyle="width:94%;padding:30rpx 0;">
			<view class="detail">
				<view v-if="detail.cover_url" @click="showPic(detail.cover_url)" class="img" :style="'background:url('+detail.cover_url+')no-repeat;background-size:cover;'"></view>
				<u-button size="small" customStyle="margin-top:4rpx;" v-if="detail.cover_url" text="修改门头照片" @click="uploadPic()" type="primary"></u-button>
				<view v-if="!detail.cover_url" @click="uploadPic()" class="img" :style="'background:url('+uploadhead+')no-repeat;background-size:cover;'"></view>	
				<view class="itx" style="margin-top: 20rpx;">联系人：{{detail.contact}} - {{detail.mobile}} <text @click="call(detail)" style="white-space: nowrap;margin-left: 6rpx;" class="tag-info">拨打</text></view>
				<view class="itx">地址：{{detail.address}} <text @click="local(detail)" style="white-space: nowrap;margin-left: 6rpx;" class="tag-info">导航</text></view>		
				<view class="line">
					<u-radio-group v-model="formdata.commission_type">		
						<u-radio :label="k" :name="v" v-for="(k,v) in settletype"></u-radio>
					</u-radio-group>
				</view>
				<view class="line" v-if="formdata.commission_type=='money'">
					<u-input type="number" placeholder="金额" v-model="formdata.money">
						<u-text
							text="元"
							slot="suffix"
							type="tips"
						></u-text>
					</u-input>
				</view>
				<view class="line" v-if="formdata.commission_type=='persent'">
					<u-input type="number" placeholder="比例" v-model="formdata.persent">
						<u-text
							text="%"
							slot="suffix"
							type="tips"
						></u-text>
					</u-input>
				</view>
				<view class="line">
					<u-button text="保存" size="small" type="primary" @click="submit"></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showSearch" @close="showSearch=false" mode="center" :round="4" customStyle="width:80%;padding:20rpx 0;">
			<view class="search">
				<u-input placeholder="请输入包含商铺名称的关键词" v-model="keywords"/>
				<u-button type="primary" size="small" @click="search" customStyle="margin-top:20rpx;">查询</u-button>
				<u-button type="warning" size="small" @click="reset" customStyle="margin-top:20rpx;">重置</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {methods} from '@/utils/methods.js';
	export default {
		data() {
			return {
				settletype:{},
				list:[],
				endData:false,
				page:1,
				showDetail:false,
				detail:'',
				seller_id:'',
				hair_id:'',
				showSearch:false,
				keywords:'',
				uploadhead:'',
				formdata:{
					customer_id:'',
					commission_type:'month',
					money:'',
					persent:''
				}
			}
		},
		onPullDownRefresh() {
			this.reset(true);
		},
		onLoad(e) {
			this.uploadhead=this.$baseUrl+'assets/img/uploadhead.png';
			if(e.seller_id){
				this.seller_id=e.seller_id;
				this.pagelist();
			}
			if(e.hair_id){
				this.hair_id=e.hair_id;
				this.pagelist();
			}
		},
		filters:{
			parseType:function(data){
				if(data=='money')return '现金奖励';
				if(data=='persent')return '比例提成';
				if(data=='month')return '独立分账';
			}
		},
		onReachBottom(){
			this.pagelist();
		},
		methods: {
			...methods,
			uploadPic:function(){
				uni.chooseImage({
					count:1,
					sizeType:'compressed',
					success: (e) => {
						let file = e.tempFiles[0].path;
						this.$uploadfile(file, res => {
							this.updatecover(res.fullurl);
						});
					}
				});	
			},
			updatecover:function(url){
				this.$post('admin/store/updatecover',{store_id:this.detail.id,url:url}).then(res=>{
					this.detail.cover_url=url;
					this.list=this.list.map(t=>{
						if(t.id==this.detail.id){
							t.cover_url=url;
						}
						return t;
					});
				});
			},
			submit:function(){
				this.$post('admin/channel/setcomm',this.formdata,true).then(res=>{
					let index=-1;
					for(let i=0;i<this.list.length;i++){
						if(this.list[i].id==this.detail.id){
							index=i;
						}
					}
					if(!this.list[index].commission){
						this.list[index].commission={};
					}
					this.list[index].commission.commission_type=res.commission_type;
					this.list[index].commission.money=res.money;
					this.list[index].commission.persent=res.persent;
					this.showDetail=false;
				});
			},
			reset:function(pulldown=false){
				this.keywords='';
				this.list=[];
				this.endData=false;
				this.page=1;
				this.showSearch=false;
				this.pagelist(pulldown);
			},
			showPic:function(url){
				uni.previewImage({
					urls:[url]
				});
			},
			search:function(){
				this.showSearch=false;
				this.list=[];
				this.endData=false;
				this.page=1;
				this.pagelist();		
			},
			call:function(detail){
				uni.makePhoneCall({
					phoneNumber:detail.phone
				});
			},
			local:function(detail){
				uni.openLocation({
					latitude:parseFloat(detail.latitude),
					longitude:parseFloat(detail.longitude),
					fail(e) {
						console.log(e);
					}
				});
			},
			showStore:function(detail){
				this.detail=detail;
				this.showDetail=true;
				this.formdata.customer_id=detail.id;
				this.formdata.commission_type=detail.commission?detail.commission.commission_type:'';
				this.formdata.money=detail.commission?detail.commission.money:'';
				this.formdata.persent=detail.commission?detail.commission.persent:'';
			},
			pagelist:function(pulldown=false){
				if(this.seller_id){
					if(this.endData){
						this.$msg('已经到底了');
						return;
					}
					this.$get("admin/seller/store",{
						seller_id:this.seller_id,
						page:this.page,
						keywords:this.keywords
					},true).then(res=>{
						if(pulldown){
							uni.stopPullDownRefresh();
						}
						if(res.list.length<10){
							this.endData=true;
						}
						this.list=this.list.concat(res.list);
						this.settletype=res.settletype;
						this.page++;	
					});		
				}
				if(this.hair_id){
					this.$get("admin/seller/store",{
						hair_id:this.hair_id				
					},true).then(res=>{				
						this.list=res.list;
						this.settletype=res.settletype;
						this.detail=res.list[0];
						this.formdata.hair_id=res.list[0].hair_id;
						this.formdata.commission_type=res.list[0].commission_type?res.list[0].commission_type:'month';
						this.formdata.money=res.list[0].commission_money;
						this.formdata.persent=res.list[0].commission_persent;
						this.formdata.seller_store_id=res.list[0].seller_store_id;
						this.showDetail=true;
					});		
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #eeeeee;
	}
	.searchbtn{
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		background-color: #3f9ad7;
		border-radius: 50%;
		padding: 8rpx;
		z-index: 999;
	}
	.detail{
		padding: 20rpx;
		text-align: center;
		.itx{
			font-size: 28rpx;
			text-align: left;
			margin-bottom: 20rpx;
		}
		.itx:last-child{
			margin-bottom: 0rpx;
		}
		.img{
			width: 100%;
			height: 300rpx;
			margin-bottom: 10rpx;
		}
		.line{
			margin-bottom: 20rpx;
			.u-input{
				padding-top: 6rpx;
				padding-bottom: 6rpx;
			}
		}
		.u-radio-group{
			display: flex;
			justify-content: flex-start;
			.u-radio{
				margin-right: 20rpx;
			}
			.u-radio__text{
				color: #333!important;
				font-size:28rpx!important;
			}
		}
	}
	.search{
		padding: 20rpx;
	}
</style>